<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        html {
            font-size: 62.5%;
        }

        body {
            font-size: 1.5em;
            line-height: 1.6;
            font-weight: 400;
            font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
            color: #222;
        }
    </style>
    <style class="cp-pen-styles">.wrapper {
        margin: 0 auto;
        width: 90%;
    }

    .cards {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .cards li {
        border: 2px solid #490A3D;
        border-radius:5px;
        background-color: #BD1550;
        color: #fff;
        flex: 1 1 200px;
    }

    .cards h2 {
        background-color: #490A3D;
        margin: 0;
        padding: 10px;
    }

    .cards p {
        padding: 10px;
    }

    .flex {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -10px;
    }

    .flex li {
        flex: 1 1 200px;
        margin: 10px;
    }

    .grid {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        /*grid-template-columns: repeat(auto-fill, minmax(200px 1fr));*/
        grid-gap: 20px;
    }
    </style></head><body>
<div class="wrapper">
    <h1>Flexbox</h1>
    <ul class="flex cards">
        <li><h2>Card 1</h2>
            <p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
            </p></li>
        <li><h2>Card 2</h2>
            <p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
            </p></li>
        <li><h2>Card 3</h2>
            <p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
            </p></li>
        <li><h2>Card 4</h2>
            <p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
            </p></li>
        <li><h2>Card 5</h2>
            <p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
            </p></li>

    </ul>

    <h1>CSS Grid Layout</h1>
    <ul class="grid cards">
        <li><h2>Card 1</h2>
            <p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
            </p></li>
        <li><h2>Card 2</h2>
            <p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
            </p></li>
        <li><h2>Card 3</h2>
            <p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
            </p></li>
        <li><h2>Card 4</h2>
            <p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
            </p></li>
        <li><h2>Card 5</h2>
            <p>Posuere varius ullamcorper ipsum adipiscing dignissim ipsum adipiscing a a quisque malesuada quam purus venenatis sagittis fermentum parturient curabitur montes a metus.
            </p></li>

    </ul>
</div>

</body></html>